<template>
  <el-dialog

    title="补货详情"
    :visible.sync="dialogVisible"
    width="500px"
  >
    <el-table
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        prop="channelCode"
        label="货到编号"
        width="180"
      />
      <el-table-column
        prop="skuName"
        label="商品"
        width="180"
      />
      <el-table-column
        prop="expectCapacity"
        label="补货数量"
      />
    </el-table>
    <span slot="footer" class="dialog-footer">
      <div class="footer">
        <el-button class="cancel" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="confirm" @click="dialogVisible = false">确 定</el-button>
      </div>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'LackOrder',
  props: {
    list: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      tableData: [],
      dialogVisible: false
    }
  },
  methods: {
    openDialog () {
      this.dialogVisible = true
    },
    // 测试
    fn () {
      console.log(this.list)
    }
  }

}
</script>

<style scoped lang='scss'>
::v-deep .el-dialog {
  border-radius: 10px !important;
}
.footer {
  text-align: center !important;
}
.cancel {
  background-color: rgb(251, 244, 240) !important;
    color: rgb(101, 91, 86) !important;
    border: none;
}

.confirm {
  background: linear-gradient(135deg, rgb(255, 151, 67), rgb(255, 94, 32)) !important;
  border: none;
}
</style>
